<template>
  可以使用 el-table-column 自定义扩展列 <br>
  <!--表单控件-->
  <nf-grid
    v-grid-drag="gridMeta"
    v-bind="gridMeta"
    :dataList="dataList"
    :selection="selection"
    size="small"
  >
    <el-table-column prop="week" label="外部col" width="180" />
    <el-table-column prop="text" label="外部col2" width="180" >
      <template #default="scope">
        <div>text: {{ scope.row.text }}</div>
        <div>week: {{ scope.row.week }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="option" fixed="right" label="操作" width="150">
      <template #default>
        <el-button link type="primary" size="small" @click="handleEdit"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
   
  </nf-grid>

</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { Timer } from '@element-plus/icons-vue'
  // import type { DebuggerEvent, Component} from 'vue'
  import { nfGridSlotCol, createDataList } from '../../../lib/main'
  import _gridMeta from './grid.json'
  import _formMeta from '../form/form.json'

  import { EAlign } from '../../../lib/types/enum'
  import type { IGridSelection, IGridItem } from '../../../lib/types/50-grid'
 
  // 自定义指令
  import { _gridDrag } from '../../../lib/main'
  
  export default defineComponent({
    name: 'nf-elp-grid-slot-page',
    directives: {
      gridDrag: _gridDrag
    },
    components: {
      Timer,
      nfGrid: nfGridSlotCol
    },
    props: {
      moduleID: { // 模块ID
        type: [Number, String],
        default: 1 
      }
    },
    setup(props, ctx) {
      // console.log('读取的 json：', _gridMeta)
      const gridMeta = reactive(_gridMeta)

      // 设置列的先后顺序和是否显示
      gridMeta.gridMeta.colOrder = [90, 100, 113, 101, 102, 105, 115, 116, 120,121,150, 2000]

      // 设置一个操作按钮列
      const optionCol: IGridItem = {
        id: 2000,
        colName: "option",
        label: "操作",
        width: 180,
        fixed: EAlign.right,
        align: EAlign.center,
        headerAlign: EAlign.center
      }

      gridMeta.itemMeta['2000'] = optionCol

      const selection = reactive<IGridSelection>({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      // 根据 meta 创建表单的 model
      const _dataList = createDataList(_formMeta.itemMeta, 10).reverse()

      const dataList = reactive(_dataList)

      const handleEdit = (index: number, row: any) => {
        console.log(index, row)
      }
      const handleDelete = (index: number, row: any) => {
        console.log(index, row)
      }

      return {
        handleEdit,
        handleDelete,
        dataList,
        selection,
        gridMeta
      }
    }
  })

</script>